<template>
    <ul flex class="h50 white-bg tc f16 text3">
        <template v-for="(i, index) in list">
            <li class="item" :class="{active: index <= value}">{{i}}</li>
            <li v-if="index < list.length - 1"><i class="iconfont icon-youjiantou2 f14"></i></li>
        </template>
    </ul>
</template>
<script>
  export default {
    props: {
      value: {
        default: 0
      }
    },
    data () {
      return {
        list: ['选择类型', '填写资料', '上传证件', '提交资料']
      }
    },
    computed: {},
    methods: {},
    components: {}
  }
</script>
<style type="text/scss" lang="scss" scoped>
    @import '../../css/variable.scss';
    ul {
        .item {
            flex: 1;
        }
        .active {
            color: $c2;
        }
    }
</style>
